import { useEffect, useId } from 'react';

import gigachat from '@/assets/gigachat.jpg'
import { UseLocalStorageState } from '@/hook/useLocalStorageState';

interface Props {
  setAuto: (isCheck: boolean) => void;
}

export const ToggleSwitch = ({ setAuto }: Props) => {
  const uniqueId = useId()
  const [isChecked, setIsChecked] = UseLocalStorageState('isChecked', false);

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
    setAuto(!isChecked);
  };

  useEffect(() => {
    setAuto(isChecked);
  }, [])

  return (
    <label
      className={`w-12 min-w-14 max-w-12 p-[2px] rounded-xl flex items-center cursor-pointer select-none bg-gradient-to-b ${isChecked ? 'from-blue-200 from-10% via-sky-200 via-30% to-emerald-200 to-90% ' : 'bg-slate-300'}`}
      htmlFor={uniqueId}
    >
      <input
        type="checkbox"
        id={uniqueId}
        checked={isChecked}
        onChange={handleCheckboxChange}
        className="hidden"
      />
      <div className={`w-[42px] flex  items-center justify-between  text-white rounded-xl px-[2px] pl-[6px] text-sm transition-transform bg-slate-700 ${isChecked ? 'translate-x-[10px]' : ''}`} ><span >AI</span> <div className='size-4 overflow-hidden rounded-full' ><img src={gigachat} className={`transition-transform ml-auto ${isChecked ? '' : 'grayscale'}`} /></div> </div>
    </label>
  );
};